<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component-2</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>component-2</h1>
    <!-- 组件：自定义的html中不存在的标签 -->
    <hr>
    <div id="app">
        <panda from-here="China"></panda>
        <panda :from-here="message"></panda>
        <!-- 注册属性here -->
    </div>
    <div id="id1">
        <chen></chen>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'Chinaeeee'
            },
            components:{//局部组件在构造器内定义,一次可定义多个，只能用于本构造器作用域
                "panda":{//定义panda组件，带有from-here属性
                    template:`<div style="color:green">Panda from {{fromHere}}</div>`,
                    props:['fromHere']//定义属性，数组，可放多个属性，不支持‘-’,用小驼峰写法可解决
                }
            }
        }) 
        var id1=new Vue({
            el:'#id1'
        }) 
    </script>
</body>
</html>